<template>
  <div class="NewsDetails">
    <banner/>
    <div class="NewsDetails-product">
      <div class="NewsDetails-product-content">
        <p class="product-title">{{ newsIdList.title }}</p>
        <div class="product-content" v-html="newsIdList.content"></div>
        <p class="product-time">{{ newsIdList.createTime }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref ,onMounted} from "vue";
import Banner from "../components/Banner";

const pid = ref(0);
const newsIdList = ref({});

const route = useRoute();
pid.value = route.params.id;

onMounted(() => {
  newsIdList.value.content = processImagesInContent(newsIdList.value.content);
});

try {
  const {data:newsData} = await baseFetch(`news/id/${pid.value}`);
  newsIdList.value = newsData.value[0];
  dateFormat(newsIdList.value);
} catch (error) {
  console.error("请求出错:", error);
}
</script>

<style lang="scss" scoped>
.NewsDetails {
  width: 100%;
  height: 100%;
  &-product {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    &-content {
      width: 70%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 50px 0;
      .product-title {
        font-size: 22px;
        color: #e13834;
        font-weight: bold;
        padding: 10px 0;
      }
      .product-content {
        font-size: 17px;
        padding: 10px 0;
      }
      .product-time {
        align-self: flex-end;
      }
    }
    @media screen and (max-width: 1000px) {
      &-content {
        width: 88%;
      }
    }
  }
}
</style>
